<template>
    <div class="pb-108 no_touch">
      <div class="px-30 pt-20">
        <div class="flex h-88 w-full box-border rounded-lg">
            <div @click="$router.push('/exchange/exchangePage')"  class="font-bold font-32 flex justify-center items-center flex-1">
                <span class="h-60 lh-60 font-16  px-40 borderColor rounded-lg textColor">{{$t('闪兑')}}</span>
            </div>
            <div  class="font-bold flex font-32 justify-center items-center flex-1">
                <span class="h-60 lh-60 btnMain px-60 rounded-lg text-black font-16">{{ $t('现货')}}</span>
            </div>
            <div @click="$router.push('/pledgeLoan')" class="font-bold font-32 flex justify-center items-center flex-1">
                <span class="h-60 lh-60 font-16  px-40 borderColor rounded-lg textColor">{{ $t('质押借币') }}</span>
            </div>
        </div>
      </div>
        <!-- :key="symbol"-->
        <!-- 头部区 -->
        <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :price="price" :range="range" :isTrade="true"
            @update-coin="onUpdate" @data="quote = $event" />

        <div class="trade-buy-sell flex justify-between px-30 py-30">
            <trade-order-area :symbol="symbol" :init-open="initOpen" :init-close="initClose" :price="price"
                @ordered="onOrdered" />
            <keep-alive>
                <trade-deep-data :symbol="symbol" v-if="symbol" :price="price" class="w-290 ml-30" />
            </keep-alive>
        </div>
        <div class="h-16 diviLine"></div>
        <div>
            <div class="flex justify-between border-b-color items-center">
                <div class="flex  pl-30">
                    <template>
                        <div class="w-180 flex flex-col items-center pt-22 text-grey" @click="tabClick('1')"
                            :class="tabType == '1' ? 'active-line' : ''">{{ $t('当前委托') }}</div>
                        <div class="w-180 flex flex-col items-center pt-22 ml-50 text-grey" @click="tabClick('2')"
                            :class="tabType == '2' ? 'active-line' : ''">{{ $t('资产') }}</div>
                    </template>
                </div>
                <img src="../../assets/image/public/record.png" alt="record-img" class="w-32 h-35 pr-30 "
                    @click="goHistory" />
            </div>
        </div>
        <div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">
            <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
                @cancelOrder="cancelOrder" />
        </div>
        <div class="pl-32 pr-32 pb-100" v-else>
            <div class="mb-20 border-b">
                <p class="font-28 text-grey mt-24 mb-42">{{ $t('当前币对资产') }}</p>
                <ul>
                    <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
                        <div class="flex items-center">
                            <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
                                class="w-52 h-52 rounded-full mr-16" />
                            <p class="flex flex-col">
                                <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
                                <span class="font-20 text-grey">{{ item.full_name }}</span>
                            </p>
                        </div>
                        <div class="flex flex-col items-end">
                            <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                            <span class="font-20 text-grey">
                                {{ currency.currency_symbol }}
                                {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : '0.0' }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mb-20 border-b">
                <p class="font-28 text-grey mt-24 mb-42">{{ $t('其他非0资产') }}</p>
                <ul>
                    <li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
                        <div class="flex items-center">
                            <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol}.png` : require('@/assets/loading-default.png')"
                                class="w-52 h-52 rounded-full mr-16" />
                            <p class="flex flex-col">
                                <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
                                <span class="font-20 text-grey">{{ item.full_name }}</span>
                            </p>
                        </div>
                        <div class="flex flex-col items-end">
                            <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                            <span class="font-20 text-grey">
                                {{ currency.currency_symbol }}
                                {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : '0.0' }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div v-if="tabType == '1' && !entrustList.length" class="flex flex-col justify-center items-center pt-185 pb-100">
            <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
            <p class="textColor">{{ $t('暂无数据') }}</p>
        </div>
        <div class="fixed w-full shadow z-10 inputBackground">
            <div class="flex justify-between px-30 py-10">
                <span class="font-24 textColor2">{{ symbol.toUpperCase() }}/USDT&nbsp;{{ $t('k线图表') }}</span>
                <van-icon class="textColor" :name="showCharts ? 'arrow-down' : 'arrow-up'"
                    @click="showCharts = !showCharts"></van-icon>
            </div>
            <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
                :showBottom="false" />
        </div>
    </div>
</template>

<script>
import TradeHead from '@/components/trade-head/index.vue'
import TradeOrderArea from '@/components/trade-order-area/index.vue'
import TradeDeepData from '@/components/trade-deep-data/index.vue'
import EntrustItem from '@/components/entrust-item'
import KLineCharts from '@/components/kline-charts'

import Axios from '@/API/trading'
// import { _getHomeList } from '@/API/home.api'
import { Popup, Swipe, SwipeItem, Circle, Icon } from 'vant';
import { mapActions, mapGetters } from 'vuex'
import { SET_COIN_LIST } from '@/store/const.store'
import { WS_URL, HOST_URL } from '@/config'
import TradeApi from "@/API/trading.js";
import { getStorage } from '@/utils/utis'

export default {
    name: "TradePage",
    components: {
        TradeHead,
        TradeOrderArea,
        TradeDeepData,
        [Popup.name]: Popup,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Circle.name]: Circle,
        [Icon.name]: Icon,
        EntrustItem,
        KLineCharts
    },
    computed: {
        ...mapGetters('user', ['userInfo']),
        ...mapGetters({
            coinList: 'home/coinList',
            currency: 'home/currency'
        }),
    },
    data() {
        const initArr = []
        for (let i = 0; i < 8; i++) {
            initArr.push({
                volume: '--',
                price: '--'
            })
        }
        return {
            HOST_URL,
            quote: {},
            showCharts: false,
            updateKey: 1,
            initTimer: null,
            keyIndex: 0,
            timeout: null,
            timer: null, // 底部持仓等的公用定时器
            timer2: null, // 交割合约底部持仓等的公用定时器
            symbol: '',
            price: '',
            range: '',
            initOpen: {},
            initClose: {},
            asks: initArr, // 卖单
            bids: initArr, // 买单
            orderCur: [], // 当前委托
            orderHold: [], // 持有仓位
            futrueHold: [], // 交割持仓
            futrueHistroy: [], // 交割历史
            socket: null, // 行情
            sockets: {
                quotes: null, // 行情
                deep: null /// 深度
            },
            curTab: '', // 当前委托还是持有仓位
            selectIndex: 1, // 当前tab
            initFutrue: {}, /// 交割合约
            show: false, // popup
            entrustList: [], //当前委托订单
            tabType: 1,
            no_zeroList: [], //其他非0资产数组
            pairsList: {} //当前资产
            // curRequest: [], //
        }
    },
    async created() {
        if (!this.coinList.length) {
            await this.SET_COIN_LIST()
        }
    },
    methods: {
        ...mapActions('home', [SET_COIN_LIST]),
        onUpdate(symbol) { // 更新
            this.symbol = symbol
            this.closeSocket()
            this.init(symbol)
        },
        tabClick(type) {
            this.tabType = type;
            if (type == 2 && !this.userInfo.token) {
                this.$router.push('/login')
            }
        },
        onOrdered(evt) { // 下单过后的回调
            this.clearTimer()
            // this.clearTimeout()
            this.initParam(this.symbol, evt) // 重新初始化
            //console.log('下单后更新数据')
        },
        onTab(evt) { // 点击tab后的回调
            console.log('evt', evt)
            this.clearTimer()
            // this.clearTimeout()
            this.curTab = evt
            this[evt](this.symbol)
        },
        handleQoutes(data) {
            if (data && data.length) {
                const cur = data[0]
                this.price = cur.close
                this.range = cur.change_ratio + ''
                this.quote = cur
                this.updateKey++
            }
        },
        startQuoteSocket() { // 行情socket
            console.log('symbol', this.symbol)
            if (!this.symbol) {
                return
            }
            this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`)
            this.socket.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.handleQoutes(_data)
                }
            }
        },
        initParam(symbol, type) { // 初始化参数
            if (type === 'open' || !type) {
                //console.log('开仓数据')
                Axios.tradeBuyToken({})
                    .then(res => {
                        this.initOpen = res.data
                        console.log(this.initOpen.volume, res.data.volume, type)
                    })
            }
            if (type === 'close' || !type) {
                Axios.tradeSellToken({
                    symbol
                }).then(res => {
                    this.initClose = res.data
                })
            }
            this.getWallet()
            if (this.userInfo.token) {
                this.getOrderList();
            }
        },
        init(symbol) { // 初始化页面
            this.symbol = symbol.toLowerCase()
            if (!this.socket) {
                this.startQuoteSocket()
            }
            this.initParam(symbol) // 'open'
            this.clearTimer()
        },
        closeSocket() {
            this.socket && this.socket.close()
            this.socket = null
        },
        clearTimer() {
            clearInterval(this.timer)
            this.timer = null
        },
        tradeBuy() {
            Axios.tradeBuy({
                volume: 1,
                session_token: '',
                symbol: '',
                price: 1,
                order_price_type: '' //limit限价  opponent市价
            }).then((res) => {
                console.log(res);
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        getOrderList() {
            TradeApi.tradeRecord({
                page_no: 1,
                symbol: this.$route.params.symbol,
                type: 'orders'
            }).then(res => {
                console.log(res.data);
                this.entrustList = res.data
            }).catch(() => {

            })
        },
        cancelOrder(order) {
            TradeApi.tradeCancel({
                order_no: order,
            }).then(res => {
                this.initParam(this.symbol)
                this.$toast(this.$t('成功'))
            }).catch(() => {

            })
        },
        getWallet() {
            TradeApi.getPairs({
                pairs: `${this.symbol}/usdt`
            })
                .then(res => {
                    this.pairsList = res.data.pairs;
                    this.no_zeroList = res.data.no_zero;
                })
        },
        goHistory() {
            this.$router.push(`/tradeRecord/${this.symbol}`)
        },
    },
    beforeRouteEnter(to, from, next) {
        let { params: { symbol } } = to
        console.log('to', to)
        let catchTradeSymbol = getStorage('tradeSymbol')
        if (catchTradeSymbol) {
            symbol = catchTradeSymbol
        }
        console.log(catchTradeSymbol)
        if (symbol) {
            next(vm => {
                vm.symbol = symbol
                vm.init(symbol)
            })
        } else {
            next()
        }
    },
    activated() {
        // if (!this.socket) {
        //     this.startQuoteSocket()
        // }
    },
    deactivated() {
        this.closeSocket()
        this.clearTimer()
    },
    beforeDestroy() {
        this.closeSocket()
        // this.clearTimeout(true)
        this.clearTimer()
    }
}

</script>

<style lang="scss" scoped>
//.list-enter-active, .list-leave-active {
//  transition: all .5s;
//  transform: translateY(30px)
//}
//.list-enter, .list-leave-to
//  /* .list-leave-active for below version 2.1.8 */ {
//  transform: translateY(0)
//}

.no_touch {
    -webkit-user-select: none;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

.list-enter-active,
.list-leave-active {
    will-change: transform;
    transition: all 250ms;
}

.list-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.list-leave {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.rounded-view {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0 30px;
    box-sizing: border-box;
}

.my-swipe {
    width: 100%;
}

.active-line {
    position: relative;
    padding-bottom: 18px;
    color: $text_color;
}

.active-line::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background-color: $active_line;
}
.shadow{
    bottom: 108px;
}
</style>
